<template>
    <view>
        <custom><template #backText>推广中心</template></custom>
        <view class="bg-gradual-nddyny padding-bottom-50">
            <view class="padding-top-40 padding-lr-30 flex align-center justify-between">
                <view class="flex align-center">
                    <avatar avatar_size="xl" avatar_url="my"></avatar>
                    <view class="margin-left-20">
                        <view class="text-white text-xxl text-bold">{{$store.state.user.identity_info.nickname}}</view>
                        <view class="text-black opacity8 text-sm flex" style="margin-top: 6rpx;">
                            <template v-if="page.parent_nickname">邀请人: {{page.parent_nickname}}</template>
                            <template v-else>没有邀请人</template>
                        </view>
                    </view>
                </view>
                <view class="bg-nddyny light round padding-lr-40 padding-tb-20">
                    <text class="text-black opacity7">
                        <text class="text-13">邀请码 {{$store.state.user.identity_info.user_id}}</text>
                    </text>
                </view>
            </view>
            <view class="cu-card article margin-top-10">
                <view class="cu-item shadow padding-top-30">
                    <view class="content" style="height: 220rpx;">
                        <tkiQrcode ref="tkiQrcode" :size="220" :val="tki_qrcode_val" icon="/static/image/logo/122x122.png"
                            :iconSize="25" :onval="true" :loadMake="true" :showLoading="false">
                        </tkiQrcode>
                        <view class="desc text-gray text-sm">
                            <view class="cu-bar btn-group">
                                <button @tap="promoteQrcodeSave" class="cu-btn bg-nddyny shadow-blur text-sm padding-0-force">保存二维码</button>
                                <button @tap="promoteUrlCopy" class="cu-btn bg-nddyny shadow-blur text-sm padding-0-force">复制推广链接</button>
                            </view>
                            <view class="flex flex-direction flex-sub justify-between margin-left-20 margin-top-10">
                                <view>推广方式</view>
                                <view>1、微信等app识别二维码进行注册</view>
                                <view>2、复制推广链接到微信等app打开</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <navTabList ref="navTabList" :tab.sync="tab" :is_round="true" class_list="bg-white">
            <template #list="data">
                <template v-if="tab.cur == 'user'">
                    <nMenuItemContentAction v-for="(info, key) in data.list" :key="key">
                        <template #actionLeft>
                            <avatar avatar_size="lg" :avatar_url="info.avatar"></avatar>
                        </template>
                        <template #content>
                            <view class="flex justify-between margin-left-16">
                                <text>{{info.nickname}}</text>
                                <text class="text-df text-gray">{{info.created_at | dateFormat('yyyy-MM-dd')}}</text>
                            </view>
                            <view class="margin-left-16">
                                <view class="cu-tag margin-right-6 bg-disabled" v-if="info.is_realname != 1">实名</view>
                                <view class="cu-tag margin-right-6" :class="info.is_promoter == 1 ? 'bg-nddyny light' : 'bg-disabled'"
                                    v-if="info.is_realname == 1">推广专员</view>
                                <view class="cu-tag margin-right-6" :class="info.is_city_partner == 1 ? 'bg-nddyny light' : 'bg-disabled'"
                                    v-if="info.is_realname == 1">城市合伙人</view>
                                <view class="cu-tag margin-right-6" :class="info.is_region_agent == 1 ? 'bg-nddyny light' : 'bg-disabled'"
                                    v-if="info.is_realname == 1">区域代理</view>
                            </view>
                        </template>
                    </nMenuItemContentAction>
                </template>
                <template v-else-if="tab.cur == 'seller'">
                    <nMenuItemContentAction v-for="(info, key) in data.list" :key="key">
                        <template #actionLeft>
                            <avatar avatar_size="lg radius" :avatar_url="info.seller_logo"></avatar>
                        </template>
                        <template #content>
                            <view class="flex justify-between margin-left-16">
                                <text>{{info.seller_name}}</text>
                                <text class="text-df text-gray">{{info.created_at | dateFormat('yyyy-MM-dd')}}</text>
                            </view>
                            <view class="margin-left-16">
                                <view class="cu-tag margin-right-6 bg-disabled" v-if="info.is_realname != 1">实名</view>
                                <view class="cu-tag margin-right-6" :class="info.is_seller == 1 ? 'bg-nddyny light' : 'bg-disabled'"
                                    v-if="info.is_realname == 1">商家</view>
                                <view class="cu-tag margin-right-6" :class="info.is_firm == 1 ? 'bg-nddyny light' : 'bg-disabled'"
                                    v-if="info.is_realname == 1">企业</view>
                                <view class="cu-tag margin-right-6" :class="info.is_promoter == 1 ? 'bg-nddyny light' : 'bg-disabled'"
                                    v-if="info.is_realname == 1">推广专员</view>
                                <view class="cu-tag margin-right-6" :class="info.is_city_partner == 1 ? 'bg-nddyny light' : 'bg-disabled'"
                                    v-if="info.is_realname == 1">城市合伙人</view>
                                <view class="cu-tag margin-right-6" :class="info.is_region_agent == 1 ? 'bg-nddyny light' : 'bg-disabled'"
                                    v-if="info.is_realname == 1">区域代理</view>
                            </view>
                        </template>
                    </nMenuItemContentAction>
                </template>
            </template>
        </navTabList>
    </view>
</template>

<script>
    import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
    export default {
        components: {
            tkiQrcode
        },
        data() {
            return {
                tab: {
                    cur: 'user',
                    list: {
                        user: {
                            title: '推广用户',
                            uri: '/user/info/childrenUserList'
                        },
                        seller: {
                            title: '推广商家',
                            uri: '/user/info/childrenSellerList'
                        }
                    },
                    apiList: {}
                },
                page: {
                    parent_nickname: ''
                },
            }
        },
        onLoad() {
            this.$api.post(this, {
                loading: '注册中',
                url: '/user/info/promotePage',
                success: (Result) => {
                    if (this.$api.form.toast(this, Result)) return;
                    this.page.parent_nickname = Result.result.parent_nickname;
                }
            });
        },
        onReady() {
            this.$refs.navTabList.listInit();
        },
        onReachBottom() {
            this.$refs.navTabList.listAdd();
        },
        computed: {
            tki_qrcode_val() {
                return this.$app.app_url + '/pages/account/register?pid=' + this.$store.state.user.identity_info
                    .user_id;
            }
        },
        methods: {
            promoteQrcodeSave() {
                uni.saveImageToPhotosAlbum({
                    filePath: this.$refs.tkiQrcode.result,
                    success: () => {
                        this.$store.commit('userToastSuccess', '保存成功');
                    }
                });
            },
            promoteUrlCopy() {
                uni.setClipboardData({
                    data: '拥有数字云，拥有未来！中营联享，欢迎您的加入。' + this.tki_qrcode_val,
                    success: () => {
                        this.$store.commit('userToastSuccess', '复制成功');
                    }
                });
            }
        },
    }
</script>
